<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Login</title>
		<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="/js/jquery.i18n.properties.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="/js/util.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="/css/index.css"/>
		<script src="/js/layer/layer.js"></script>
		<link rel="stylesheet" href="/css/iconfont.css">
		<script src="/js/bootstrap-show-password.js"></script>
		<link rel="stylesheet" href="/css/login_ercode.css">
<!--		<script src="js/login.js"></script>-->
		<style type="text/css">
			.select-box{
				padding: 0.625rem;
				display: none;
				background-color: #007AFF;
				z-index: 100;
				position: absolute;
				right: 0rem;
				top: 0rem;
			}
			.select-box .language{
				margin-bottom: 0.3125rem;
			}
			footer{
				position: absolute;
				width: 100%;
				bottom: 0px;
				left: 0px;
			}
			.form-group .inpt-form{
				border: 0;
				outline: none;
				border-bottom: 1px solid #eee;
				padding: 0px 24px;
			}
			.form-group{
				position: relative;
			}
			.form-group .iconfont{
				position: absolute;
				left: 5px;
				top: 5px;
			}
			.form-group #yan{
				position: absolute;
				left: auto;
				right: 5px;
				top: 5px;
			}
			.form-group .getCode{
				position: absolute;
				color: #3a8ee6;
				font-size: 12px;
				right: 5px;
				top: 10px;
			}
		</style>
	</head>
	<body class="zh">
		<div class="container-fluid topbg">
			<div class="flex pull-right">
<!--				<div class="" data-lang="index_help">-->
<!--					Help-->
<!--				</div>-->
<!--				<div><img src="img/icon1.png" class="icon" /></div>-->
<!--				<div class="shuxian"></div>-->
				<div class="language">
					<img src="img/yingguo.png" class="guoqi" >
					<span>ENG</span>
				</div>
				<div>
					<a href="login.html" class="loginBtn" data-lang="login">登录</a>
				</div>
				<div class="select-box">
					<div class="language">
						<img src="img/zhongguo.png" class="guoqi" >
						<span>中文</span>
					</div>
					<div class="language">
						<img src="img/yingguo.png" class="guoqi" >
						<span>EN</span>
					</div>
					<div class="language">
						<img src="img/taiguo.png" class="guoqi" >
						<span>ภาษาไทย</span>
					</div>
					<div class="language">
						<img src="img/jianpuzhai.webp" class="guoqi" >
						<span>កម្ពុជា។</span>
					</div>
				</div>
			</div>
		</div>
<!--		<div class="login-box">-->
<!--			<div class="form-group login-group_re">-->
<!--				<i class="iconfont icon-shoujihaoma"></i>-->
<!--				<input type="text" class="form-control inpt-form" id="tel" placeholder="请输入手机号码" data-holder="pls_input_tel" >-->
<!--			</div>-->
<!--			<div class="form-group login-group_re">-->
<!--				<i class="iconfont icon-mima"></i>-->
<!--				<input type="password" class="form-control inpt-form" id="psw" placeholder="请输入密码">-->
<!--				<i class="iconfont xian-mi icon-icon-test" id="yan"></i>-->
<!--			</div>-->
<!--			<div class="form-group login-group_re">-->
<!--				<i class="iconfont icon-yanzhengma2"></i>-->
<!--				<input type="text" class="form-control inpt-form" id="code" placeholder="短信验证码">-->
<!--				<span class="getCode">获取验证码</span>-->
<!--			</div>-->
<!--			<div class="form-group login-group_re">-->
<!--				<i class="iconfont icon-yanzhengma2"></i>-->
<!--				<input type="text" class="form-control inpt-form" id="name" placeholder="请输入姓名">-->
<!--			</div>-->
<!--			<div class="form-group login-group_re">-->
<!--				<i class="iconfont icon-yanzhengma2"></i>-->
<!--				<input type="text" class="form-control inpt-form" id="address" placeholder="请输入地址">-->
<!--			</div>-->
<!--			<div>-->
<!--				<button class="btn btn-block btn-primary" id="SubmitBtn" data-lang="regist">注册</button>-->
<!--			</div>-->
<!--		</div>-->

		<div class="main">
			<div class="main_bg">
				<div class="loginBox">
					<!-- signContent -->
					<div class="signContent">
						<div class="signContainer">
							<div action="" class="loginForm" id="form_key" data-module="smsFrom">
								<!-- tab -->
								<div class="tabBox">
									<div class="tabBoxSwitch">
										<ul class="tabBoxSwitchUl">
											<li class="tab-active" data-id="0" data-lang="welcome">欢迎注册</li>
										</ul>
									</div>
								</div>
								<!-- tabContent -->
								<div class="tabContent">
									<!-- tabContentPhone -->
									<div class="tabcont  tabContentPhone active">
										<div class="tabcontent">
											<div class="phoneBox">
												<div class="phoneGroup">
													<button class="phone-btn selectBtn" type="button" data-type="selected">
														<span data-lang="laowo">老挝 +856</span>
														<i class="glyphicon glyphicon-chevron-down"></i>
													</button>
												</div>
												<div class="selectConentent">
													<div class="selectOptions">
													</div>
												</div>
											</div>
											<span class="line-show"></span>
											<div class="phoneInputGroup">
												<label for="" class="inputLabel phoneLabel">
													<input type="text" value="" name="" id="tel"
														   class="inputStyle phoneInput" placeholder="手机号" data-holder="phone" autocomplete="off">
												</label>
											</div>
										</div>
										<div class="tabcontent">
											<div class="phoneInputGroup">
												<label for="" class="inputLabel phoneLabel">
													<input type="password" value="" name="" id="psw"
														   class="inputStyle accountPwd" placeholder="密码" data-holder="psw" autocomplete="off">
												</label>

											</div>
											<button tabindex="-1" type="button" class="button SignFlow-switchPassword" id="yan">
                                            	<i class="iconfont icon-icon-test"></i>
											</button>
										</div>
										<div class="tabcontent">
											<div class="phoneInputGroup">
												<label for="" class="inputLabel">
													<input type="number" value="" name="" id="code"
														   class="inputStyle msgInput" placeholder="输入短信验证码" data-holder="input_code"
														   autocomplete="off">
												</label>
											</div>
											<div class="phoneGroup">
												<button class="phone-btn msgBtn" type="button" data-lang="getcode">
													获取短信验证码
												</button>
											</div>
										</div>
										<div class="tabcontent">
											<div class="phoneInputGroup">
												<label for="" class="inputLabel">
													<input type="text" value="" name="" id="name"
														   class="inputStyle msgInput" placeholder="请输入姓名" data-holder="input_name"
														   autocomplete="off">
												</label>
											</div>
										</div>
										<div class="tabcontent">
											<div class="phoneInputGroup">
												<label for="" class="inputLabel">
													<input type="text" value="" name="" id="address"
														   class="inputStyle msgInput" placeholder="请输入地址" data-holder="input_address"
														   autocomplete="off">
												</label>
											</div>
										</div>
									</div>
									<!-- tabContentAccount -->
								</div>
								<button id="submit" type="submit" class="button fromSubmit"
										data-type="smsSubmit" data-lang="regist">注册</button>
								<!-- tips -->
								<div class="SignContainer-tip">
									<div>
										<a href="login.html" data-lang="gologin">已注册，去登录</a>
									</div>
								</div>
							</div>
							<!-- ercodeSgin -->

						</div>

					</div>

				</div>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		$(function() {
			var host = getRootPath();
			$("#submit").click(
				function () {
					// 验证数据是否为空
					var f=check();
					if(f){
						// 发送请求
						var tel = $("#tel").val();
						var upsw = $("#psw").val();
						var uname = $("#name").val();
						var uaddress = $("#address").val();
						var code = $("#code").val();
						var guoji = $(".selectBtn span").html().split("+")[1];
						tel = "+"+guoji+tel;	// 完整手机号码
						$.ajax({
							url:`${host}/users/regist`,
							data:{"utel":tel,"upsw":upsw,"uname":uname,"code":code,"uaddress":uaddress},
							type:"post",
							success:function (res) {
								console.log(res);
								if(res.code==200){
									layer.msg("注册成功",{time:1000},function () {
										location.href="login.html";
										localStorage.removeItem("downCount");
									});
								}else{
									layer.msg(res.msg);
								}
							}
						})
					}
				}
			)
			// 定义验证函数
			function check() {
				var tips1 ='手机号码不能为空';
				var tips2 ='验证码不能为空';
				var tips3 = '密码不能少于6位'
				var tips4="姓名不能为空";
				var tips5="地址不能为空";
				if(localStorage.getItem("yuyan")=='en'){
					tips1="Phone number can not be blank";
					tips2="Verification code cannot be empty";
					tips3="Password cannot be less than 6 characters"
					tips5="Address cannot be blank";
					tips4="Name cannot be blank"
				}
				else if(localStorage.getItem("yuyan")=='th'){
					tips1="หมายเลขโทรศัพท์ไม่สามารถเว้นว่างได้";
					tips2="ต้องกรอกรหัสยืนยัน";
					tips3="รหัสผ่านไม่น้อยกว่า 6 ตัวอักษร"
					tips5="ที่อยู่ไม่สามารถเว้นว่างได้";
					tips4="ชื่อไม่สามารถเว้นว่างได้";
				}
				else if (localStorage.getItem("yuayn")=='kh'){
					tips1="លេខទូរស័ព្ទមិនអាចទទេបានទេ។";
					tips2="លេខកូដផ្ទៀងផ្ទាត់ត្រូវតែបំពេញ";
					tips3="ពាក្យសម្ងាត់មិនត្រូវតិចជាង 6 តួអក្សរទេ។"
					tips5="អាសយដ្ឋានមិនអាចទទេបានទេ។";
					tips4="ឈ្មោះមិនអាចទទេបានទេ។";
				}
				if($("#tel").val()<1){
					layer.msg(tips1);
					$("#tel").focus();
					return false;
				}
				if($("#psw").val()<6){
					layer.msg(tips3);
					$("#psw").focus();
					return false;
				}
				if($("#code").val()<1){
					layer.msg(tips2);
					$("#code").focus();
					return false;
				}
				if($("#name").val()<1){
					layer.msg(tips4);
					$("#name").focus();
					return false;
				}
				if($("#address").val()<1){
					layer.msg(tips5);
					$("#address").focus();
					return false;
				}
				return  true;
			}
			// 点击眼睛
			$("#yan").click(function () {
				$(this).find("i").toggleClass('icon-icon-test');
				$(this).find("i").toggleClass('icon-close-eye');
				if($(this).find("i").hasClass('icon-close-eye'))
					$("#psw").attr('type','text');
				else
					$("#psw").attr('type','password');
			})
			// 切换语言
			$(".topbg>.flex>.language").click(function(){
				$(".select-box").show();
				$(".select-box>.language").click(function(){
					let n = $(this).index();
					if(n==0)
						localStorage.setItem("yuyan",'zh');// 中文
					else if(n==1)
						localStorage.setItem("yuyan",'en');// 英文
					else if(n==2)
						localStorage.setItem("yuyan",'th');// 泰语
					else if (n==3){
						localStorage.getItem("yuyan","kh");
					}
					$(".topbg>.flex>.language>img").attr('src',$(this).find('img').attr('src'));
					$(".topbg>.flex>.language>span").html($(this).find('span').html());
					language_pack.loadProperties(n);
					$('.select-box').hide();
					location.reload();
				})
			})

			var interval=0;
			// 点击获取验证码
			$(".msgBtn").click(function () {
				var tel = $("#tel").val();	// 手机号码
				var guoji = $(".tabContent .active .selectBtn span").html().split("+")[1];
				tel = "+"+guoji+tel;	// 完整手机号码
				var tips1 ='手机号码不能为空';
				var tips2 ="发送成功，请注意查收";
				var tips3 = '60s后重新发送';
				var tips4="发送失败，请稍后重试";
				if(localStorage.getItem("yuyan")=='en'){
					tips1="Phone number can not be blank";
					tips2="Send successfully, please check";
					tips3="Resend after 60s"
					tips4="Sending failed, please try again later";
				}
				else if(localStorage.getItem("yuyan")=='th'){
					tips1="หมายเลขโทรศัพท์ไม่สามารถเว้นว่างได้";
					tips2="ส่งเรียบร้อย โปรดตรวจสอบ";
					tips3="ส่งอีกครั้งหลังจาก 60s";
					tips4="ส่งไม่สำเร็จ กรุณาลองใหม่อีกครั้งในภายหลัง";
				}
				else if (localStorage.getItem("yuyan")=='kh'){
					tips1="លេខទូរស័ព្ទមិនអាចទទេបានទេ។";
					tips2="ផ្ញើដោយជោគជ័យ សូមយកចិត្តទុកដាក់ត្រួតពិនិត្យ";
					tips3="ផ្ញើឡើងវិញបន្ទាប់ពី 60s";
					tips4="បរាជ័យក្នុងការផ្ញើ សូមព្យាយាមម្តងទៀតនៅពេលក្រោយ";
				}
				if(tel.length<1){
					layer.msg(tips1,{time:500});
					$(".tabContent .active #phoneInput").focus();
					return;
				}
				$(".msgBtn").html(tips3);
				// 发送请求
				let host = getRootPath();
				$.ajax({
					url:`${host}/users/setcode`,
					type:'post',
					data:{"utel":tel},
					success:function (res) {
						if(res.code==200){
							layer.msg(tips2)
							$(".msgBtn").attr("disabled",true);
							localStorage.setItem("downCount",60);
							interval = window.setInterval(countDown,1000);
						}else{
							layer.msg(tips4);
						}

					}
				})
			})
			// 倒数60
			function countDown() {
				var tips1 = 's后重新发送';
				var tips2="获取短信验证码";
				if(localStorage.getItem("yuyan")=='en'){
					tips1="s,resend";
					tips2="get verification code";
				}
				else if(localStorage.getItem("yuyan")=='th'){
					tips1="s,ส่งอีกครั้งหลังจาก";
					tips2="รับรหัสยืนยัน";
				}
				else if(localStorage.getItem("yuyan")=='kh'){
					tips1="s,ផ្ញើឡើងវិញបន្ទាប់ពី";
					tips2="ទទួលបានលេខកូដផ្ទៀងផ្ទាត់ SMS";
				}
				let n = localStorage.getItem("downCount");
				if(n>0)
				{
					n--;
					localStorage.setItem("downCount",n);
					$(".msgBtn").html(n+tips1);
				}else{
					$(".msgBtn").attr("disabled",false);
					localStorage.removeItem("downCount");
					$(".msgBtn").html(tips2);
					window.clearInterval(interval);
				}
			}
			if(localStorage.getItem("downCount")){
				$(".msgBtn").attr("disabled",true);
				interval = window.setInterval(countDown,1000);
			}
			// 初始化语言
			var n = 0;
			if(localStorage.getItem("yuyan")=='zh')
			{
				n=0;// 中文
				$(".topbg>.flex>.language>img").attr('src','img/zhongguo.png');
				$(".topbg>.flex>.language>span").html('中文');
			}
			else if(localStorage.getItem("yuyan")=='en')
			{
				n=1;// 英文
				$(".topbg>.flex>.language>img").attr('src','img/yingguo.png');
				$(".topbg>.flex>.language>span").html('EN');
			}
			else if(localStorage.getItem("yuyan")=='th')
			{
				n=2;// 泰语
				$(".topbg>.flex>.language>img").attr('src','img/taiguo.png');
				$(".topbg>.flex>.language>span").html('ภาษาไทย');
			}
			else if(localStorage.getItem("yuyan")=='kh')
			{
				n=3;// 泰语
				$(".topbg>.flex>.language>img").attr('src','img/jianpuzhai.webp');
				$(".topbg>.flex>.language>span").html('កម្ពុជា។');
			}
			language_pack.loadProperties(n);
		})
	</script>
</html>
